<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>部门管理</title>

  <link rel="stylesheet" href="./lib/bootstrap.min.css">
  <link rel="stylesheet" href="./css/dept.css">

</head>

<body>

  <!-- 查询的表单 -->
  <div class="d-flex justify-content-end">

    <div class="m-3">
      <input type="text" id="txt_q_deptName" class="form-control" placeholder="部门名称模糊查询">
    </div>

    <div class="m-3">
      <button id="btnQuery" class="btn btn-primary">查询</button>
    </div>

    <div class="m-3">
      <button id="btnReset" class="btn btn-danger">重置</button>
    </div>

    <div class="m-3">
      <button id="btnShowAdd" class="btn btn-success">添加</button>
    </div>

  </div>

  <!-- 数据显示的部分 -->
  <div class="m-3">

    <table class="table table-hover table-striped text-danger">

      <thead>
        <tr class="text-bg-danger">
          <th>部门编号</th>
          <th>部门名称</th>
          <th>简介</th>
          <th>信息修改时间</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody id="tbData"></tbody>

    </table>

  </div>

  <!-- 分页的部分 -->
  <div class="m-3 d-flex justify-content-center">
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item" id="btnPre">
          <a class="page-link" href="javascript:void(0)" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>

        <li class="page-item">
          <a id="btnPage" class="page-link" href="javascript:void(0)"></a>
        </li>

        <li class="page-item" id="btnNext">
          <a class="page-link" href="javascript:void(0)" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- 添加的对话框 -->
  <div id="addDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加部门</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">

          <div class="m-3">
            <input type="text" id="txt_a_deptName" class="form-control" placeholder="部门名称">
          </div>

          <div class="m-3">
            <input type="text" id="txt_a_deptInfo" class="form-control" placeholder="部门描述">
          </div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button id="btnAdd" type="button" class="btn btn-primary">添加</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改的对话框 -->
  <div id="modifyDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">修改部门</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">

          <div class="m-3">
            <input type="text" id="txt_m_deptName" class="form-control" placeholder="部门名称">
          </div>

          <div class="m-3">
            <input type="text" id="txt_m_deptInfo" class="form-control" placeholder="部门描述">
          </div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button id="btnModify" type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>


  <!-- 删除的对话框 -->
  <div id="delDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">删除部门</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <div id="divDel"></div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button id="btnDel" type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>


  <!-- 弹出层提示框 -->
  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">服务器信息</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>

  <!-- js的部分 -->
  <script src="./lib/bootstrap.bundle.min.js"></script>
  <script type="module" src="./js/dept.js"></script>

</body>

</html>